<template>
	<tm-app>
		<navbar-module title="在职人员"></navbar-module>

		<view v-if="staffList.length>0" style="overflow: auto; background-image: linear-gradient(180deg,#FADC19 2%, transparent 50%); background-attachment: fixed;margin-bottom: 150rpx" class="py-20">
			<view v-for="(item,i) in staffList" :key="i" class="flex flex-row-center-between pa-26" style="border-bottom: 1px solid #e5e6eb;">
				<view class="flex">
					<tm-avatar :round="12" :img="item.avatar || 'https://img2.baidu.com/it/u=1684676393,4028279466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'"/>
					<view class="flex flex-col flex-between px-12 py-2">
						<view class="flex">
						    <tm-text :label="item.name" :fontSize="34"/>
							<tm-sheet v-if="item.isManage" color="orange" text :border="1" :margin="[10, 0]" :padding="[4,2]" :round="2">
								<tm-text :font-size="28" label="管理员"></tm-text>
							</tm-sheet>
						</view>
						<tm-text :label="item.phone" color="#9d9d9d" :fontSize="30"/>
					</view>
				</view>
				<tm-icon name="tmicon-phone-fill" color="#01a1eb" :fontSize="40" @click="call(item.phone)"/>
			</view>
			
		</view>

        <view v-else>
			<no-data :flag="loadFlag"/>
		</view>


		<view style="position: fixed;bottom:0; width: 750rpx;">
			<tm-button :margin="[20]" block size="large" :linear-color="['#FADC19', '#23C343']" :round="16" linear="right" :fontSize="34" :height="90" :shadow="0" label="新增人员" @click="gotoList('/pages/staff/form/form')"/>
		</view>

	</tm-app>
</template>

<script setup lang='ts'>
	import { onShow } from "@dcloudio/uni-app";
	import { ref } from 'vue'
	import {getInfoList} from '../../index/resource/http'
	
	onShow(()=>{
		getData()
	})

    const loadFlag = ref(false)
	const staffList = ref([])

	const gotoList = (url) => {
		uni.navigateTo({
			url,
	   })
	}

	const getData  = async () => {
		staffList.value = []
		const {data} = await getInfoList()
		staffList.value = data
		
		loadFlag.value = true
	}
	
	const call = (phone)=>{
		uni.makePhoneCall({
			phoneNumber: phone //仅为示例
		});
	}
</script>

<style>

</style>
